<template>
  <!-- 第2屏的背景-黑色 -->
  <div class="product-bg">
    <!-- 4个产品 外面的大盒子 -->
    <div class="product-box">
      <!-- 分别是4个产品 -->
      <div class="product-box1">
        <img
          class="main-image product1"
          src="/img/product1.jpg"
          alt=""
          ref="imgRef"
        />
        <video
          class="video"
          ref="videoRef"
          src="/public/img/videos-lens_1312.mp4"
          preload="auto"
          muted
        ></video>
        <div class="content">
          <p class="first_p">
            双潜望四主摄
            <br />
            洞悉色彩 解构光影
          </p>
          <img class="arrow" src="/img/arrow.svg" alt="" />
        </div>
      </div>
      <div class="product-box2">
        <img class="main-image" src="/img/product2.jpg" alt="" />
        <div class="content">
          <p>
            哈苏大师影像
            <br />
            大师视角 格调入镜
          </p>
          <img class="arrow" src="/img/arrow.svg" alt="" />
        </div>
      </div>
      <div class="product-box3">
        <img class="main-image" src="/img/product3.jpg" alt="" />
        <div class="content">
          <p>
            2K 超通透钻石屏
            <br />
            出众亮度 醒目护眼
          </p>
          <img class="arrow" src="/img/arrow.svg" alt="" />
        </div>
      </div>
      <div class="product-box4">
        <img class="main-image" src="/img/product4.jpg" alt="" />
        <div class="content">
          <p>
            卫星通信
            <sup>1</sup>
            <br />
            畅游天际 通达寰宇
          </p>
          <img class="arrow" src="/img/arrow.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const imgRef = ref()
const videoRef = ref()

onMounted(() => {
  mouseEvent()
})

const mouseEvent = () => {
  console.log(imgRef.value)
  imgRef.value.addEventListener('mouseover', () => {
    // videoRef.value.style.display = 'block'
    // videoRef.value.style.opacity = 1
    videoRef.value.play()
  })
  videoRef.value.addEventListener('mouseleave', () => {
    // videoRef.value.style.display = 'none'
    // videoRef.value.style.opacity = '0'
  })
}
</script>

<style lang="scss" scoped>
.product-bg {
  background-color: #000;
  padding: 88px 60px;
  //   background-image:url(/public/img/Banner.jpg);
  background-attachment: fixed;

  .product-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .product-box1,
    .product-box2,
    .product-box3,
    .product-box4 {
      transition: all 0.2s linear;
      width: 25%;
      overflow: hidden;
    }

    .product-box1:hover,
    .product-box2:hover,
    .product-box3:hover,
    .product-box4:hover {
      width: 32%;
    }

    .product-box1 {
      //   transform: translateY(330px);
      height: 480px;
      .video {
        opacity: 0;
      }
    }
    .product-box1:hover {
      //   transform: translateY(0);
      .video {
        position: absolute;
        opacity: 1;
        // transform: scale(.8, .8);
        left: -440px;
      }
      .product1 {
        opacity: 0;
      }
    }

    .main-image:hover {
      transform: scale(1.1, 1.1);
    }
  }

  .product-box > * {
    position: relative;
  }
}

// 4个产品图片的样式
.main-image {
  width: 100%;
  height: 476px;
  transition: 0.2s all linear;
  transition-delay: 0.2s;
}
.video {
  // width: 100%;
  // height: 100%;
  // top: 0;
  // display: none;
  //   opacity: 0;
}
.first_p {
  position: relative;
  z-index: 999;
}

.content {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 22px;
  bottom: 28px;
}

.main-image,
.content {
  cursor: pointer;
}

.product-box p {
  color: #fff;
  font-size: 24px;
}

.arrow {
  width: 24px;
  height: 24px;
  margin-top: 40px;
  margin-left: 60px;
}
</style>
